<script>
import { navList } from '@/api/constant'
export default {
  name: 'NavPage',
  data () {
    return {
      showMenu: false,
      navList
    }
  },
  methods: {
    linkTo (item) {
      this.$router.push(item.link)
      this.showMenu = false
    }
  },
  watch: {
    $route: {
      handler (v) {
        console.log(v)
      },
      deep: true
    }
  }
}
</script>

<template>
  <div class="nav-page">
    <div class="nav">
      <div class="w">
        <div class="logo"></div>
        <div class="icon" @click="showMenu = !showMenu">
          <img v-show="!showMenu" src="/icon/menu.png" alt="" />
          <img v-show="showMenu" src="/icon/close-white.png" alt="" />
        </div>
      </div>
    </div>

    <div class="mask" v-show="showMenu">
      <ul class="mask-nav">
        <li class="nav-item" v-for="nav in navList" :key="nav.link">
          <div class="menu">
            <div @click="() => linkTo(nav)">{{ nav.text }}</div>
            <div
              class="icon"
              v-if="nav.children.length"
              @click="nav.showChildren = !nav.showChildren"
            >
              <img
                v-show="!nav.showChildren"
                src="/icon/bottom-white.png"
                alt=""
              />
              <img v-show="nav.showChildren" src="/icon/top.png" alt="" />
            </div>
          </div>
          <ul class="submenu" v-show="nav.showChildren">
            <li
              v-for="menu in nav.children"
              :key="menu.link"
              @click="() => linkTo(menu)"
            >
              <div class="icon">
                <img :src="menu.icon" alt="" />
              </div>
              <div>{{ menu.text }}</div>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <router-view></router-view>

    <div class="foot">
      <div class="w">
        <div class="us">
          <div class="logo"></div>
          <div class="info">
            <p rq-global="foot_email" global-type="code">
              电子邮箱：contact@yuhuachina.com
            </p>
            <p rq-global="foot_address" global-type="code">
              地 址：中国湖北省武汉市江夏区阳光大道25号
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.nav-page {
  padding-top: 300px;
  .nav {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    height: 300px;
    background-color: var(--primary_color);

    .w {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .logo {
        width: var(--logo_phone_width);
        height: var(--logo_phone_height);
        background: url(@/assets/logo-blue.png) 0 0 / 100%
          no-repeat;
      }
      .icon {
        font-size: 180px;
      }
    }
  }

  .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(51, 48, 135, 0.6);
    top: 300px;
    left: 0;
    z-index: 9999;
    color: #fff;
    .mask-nav {
      margin: 40px 50px;
      .nav-item {
        padding: 0 40px;
        line-height: 120px;
        font-size: 50px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.6);
        .menu {
          display: flex;
          justify-content: space-between;
        }
        .submenu {
          padding: 0 40px;
          li {
            display: flex;
            align-items: center;
            .icon {
              font-size: 60px;
              margin-right: 20px;
            }
          }
        }
      }
    }
  }

  .foot {
    padding: 40px 0;
    background: url(http://www.yuhuachina.com/Temp/PC/images/img05.png) left top /
      100% 100% no-repeat;
    .w {
      width: 1200px;
      margin: 0 auto;
      .us {
        color: #fff;
        margin-top: 80px;
        .logo {
          width: 100%;
          height: 320px;
          background: url(@/assets/logo.png) 0 0 / 100% no-repeat;
        }
        .info {
          margin-top: 50px;
          font-size: 46px;
          line-height: 2;
        }
      }
    }
  }
}
</style>
